<template>
  <li class="pt30 pb30 bb90 clearfix">
    <img class="fl br2 w310 h200 mr20" :src="myCircle['imgUrl']+'?x-oss-process=image/resize,m_fill,h_200,w_310'" width="310" height="200" alt=""/>
    <dl class="fl w550 h200">
      <dt class="c0 lh30 f20 clearfix">{{limitWord(myCircle['groupName'],15,'...')}} <span class="fr f12 c60 lh150"><i
        class="inline-block w10 h14 locationBg vm"></i>{{myCircle['areaName']}}</span></dt>
      <dd class="mt10">
        <table class="f12 c40 fm-songti lh20 tl vt" border="0" cellspacing="" cellpadding="">
          <tr>
            <td class="pb10">
              <b class="fl w60 c7 letter1 ">车&nbsp;&nbsp;型:</b>
              <div class="fl categoryList" v-if="myCircle['categoryNames']!=null">
                <span class="fl h18 lh18 c50 pl10 pr10 mr10 b90" v-for="(category,index) in myCircle['categoryNames'].split(',')" v-if="category!=''&&index<4">{{category}}</span>
                <span v-if="myCircle['categoryNames'].split(',').length>4">...</span>
              </div>
            </td>
          </tr>
          <tr>
            <td class="pb10">
              <b class="fl w60 c7 letter1">兴趣点：</b>
              <div class="fl" v-if="myCircle['typeNames']!=null">
                <span class="fl h18 lh18 c50 pl10 pr10 mr10 b90" v-for = "type in myCircle['typeNames'].split(',')" v-if="type!=''" >{{type}}</span>
              </div>
            </td>
            <td class="pb10">
            </td>
          </tr>
          <tr>
            <td class="pb10">
              <b class="fl w50 c7 letter1 ">领队：</b>
              <div class="fl">
                <span class="fl ">张阿毛</span>
              </div>
            </td>
          </tr>
        </table>
      </dd>
      <dd class=" mt5 overflow ">{{limitWord(myCircle['introduce'],40,'...')}}</dd>
      <dd class="c60 f12 fm lh28 mt15 clearfix">
        <span class="inline-block vm mr30">已来过<i class="c_orgRed_ff481d mr5 ml5 ">{{myCircle['userCount']}}</i>人加入</span>
        <a href="javascript:void(0);" class=" fr bg_grn_119c5b c100 f14 h28 lh28 pl15 pr15 br2 hoverbg_orgred" @click="lookMore">查看详情</a>
      </dd>
    </dl>
  </li>
</template>

<script>
  import Utils from "../assets/Util";
  export default {
    name: "circleItem",
    props:{
      circle:Object
    },
    data(){
      return {
        myCircle:this.circle
      }
    },
    mounted(){
      this.errorLoadImg();
    },
    methods:{
      // 限制字数
      limitWord(words, wordsLength, mark){
        return Utils.limitworld(words, wordsLength, mark);
      },
      lookMore(){
        this.$message.warning("近期开放");
      },
      errorLoadImg(){
        document.addEventListener("error", function (e) {
          var elem = e.target;
          if (elem.tagName.toLowerCase() == 'img') {
            elem.src = "static/images/preload.png";
            elem.style.width = 310 + "px";
            elem.style.height = 200 + "px";
          }
        }, true);
      }
    }
  }
</script>

<style scoped>
.categoryList{
  width: 490px;
}
</style>
